<template>
  <view class="coupons-list" v-if="couponDetail.length > 0">
    <view
      class="coupon"
      v-for="item in couponDetail"
      :key="item.id">
      <view class="left">
        <view class="money">{{ item.money }}元</view>
        无门槛立减
      </view>
      <view class="right">
        <view class="text">
          通用{{ item.money }}元优惠劵
          <text class="num">x{{ item.count }}</text>
        </view>
        <view class="btn" @click.stop="goClassify">去使用</view>
      </view>
    </view>
  </view>
  <up-empty mode="coupon" v-else></up-empty>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { getCouponService, getCouponDetail } from '../../api/coupons.js'
import { useUserStore } from '../../stores/user.js'
import { ref } from 'vue'

const userStore = useUserStore()

// 获取优惠劵信息
const couponList = ref([])
const couponDetail = ref([])
onShow(async () => {
  // 发送请求获取已有优惠劵
  const res = await getCouponService(userStore.userInfo.userId)
  couponList.value = res.data ? res.data : []
  if(couponList.value.length > 0) {
    couponList.value.forEach(async (item) => {
      let info = {}
      // 根据优惠劵ID获取优惠劵详情信息
      const result = await getCouponDetail(item.couponsId)
      info = {...result.data}
      info.count = item.count
      info.couponId = item.id
      couponDetail.value.push(info)
    })
  } else
  {
    return false
  }
})

const goClassify = (e) => {
  e.stopPropagation()
  uni.switchTab({
    url: '/pages/classify/classify',
  })
}
</script>

<style lang="scss" scoped>
.coupons-list {
  width: 100%;
  .coupon {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;

    .left {
      width: 30%;
      background-color: rgba(255, 90, 17, 0.3);
      font-size: 28rpx;
      color: #ff5910;
      border-radius: 20rpx 10rpx 10rpx 20rpx;
      text-align: center;
      box-sizing: border-box;
      padding: 28rpx 20rpx;

      .money {
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .right {
      width: 70%;
      border-radius: 10rpx 20rpx 20rpx 10rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding: 50rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .text {
        display: flex;
        font-size: 36rpx;
        font-weight: bold;

        .num {
          font-weight: normal;
          color: #666;
          margin-left: 10rpx;
        }
      }

      .btn {
        width: 120rpx;
        height: 50rpx;
        border-radius: 25rpx;
        line-height: 50rpx;
        text-align: center;
        background: linear-gradient(to right, #ff6f1d, #fea244);
        color: #fff;
        font-size: 28rpx;
      }
    }
  }
}
</style>
